<template>
  <el-card>
    <!-- 2. 准备一个具备高宽DOM容器 -->
    <div id="b-map"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "BMap",
};
</script>

<script lang="ts" setup>
import { onMounted } from "vue";

// https://lbsyun.baidu.com/index.php?title=jspopularGL

onMounted(() => {
  // 1. 引入百度地图API的js文件
  const script = document.createElement("script");
  script.src =
    "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=74nk9u7BWqSqI26DcTA52ehA84U0ax4x&callback=initMap";
  document.body.appendChild(script);

  window.initMap = () => {
    // 3. 创建地图实例
    const map = new BMapGL.Map("b-map");
    // 4. 设置中心点坐标
    const point = new BMapGL.Point(114.05, 22.543099);
    // 5. 地图初始化，同时设置地图展示级别
    map.centerAndZoom(point, 10);

    const scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
    map.addControl(scaleCtrl);
    const zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
    map.addControl(zoomCtrl);
    const cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
    map.addControl(cityCtrl);
  };
});
</script>

<style scoped>
#b-map {
  width: 100%;
  height: 500px;
}
</style>

<style>
.anchorBL {
  display: none;
}
</style>
